<template>
	<view class="sign-in-box" v-if="isLoad">
		<view class="sign-in-view">
			<view class="sign-in-day" v-for="(item, key, index) in signList" :key="key">
				<view class="sign-in-icon" :class="{ today: today == key }">
					<template>
						<image class="sign-in-day-image" v-if="today == key" src="@/static/images/sign-in/sign-in-today.png"></image>
						<image class="sign-in-day-image" v-else-if="item.status == 1 || item.continuous_days > 0" src="@/static/images/sign-in/sign-in-ok.png" mode="aspectFit"></image>
						<image class="sign-in-day-image" v-else src="@/static/images/sign-in/sign-in-no.png" mode="aspectFit"></image>
					</template>
					<template>
						<image class="sign-in-day-tick" v-if="item.status == 1" src="@/static/images/sign-in/sign-in-tick.png" mode="aspectFit"></image>
						<view class="sign-in-day-remark" v-else>+{{ item.integral }}</view>
					</template>
				</view>
				<view class="sign-in-day-text">{{ item.time }}</view>
			</view>
		</view>
		<view class="sign-in-btn" @tap.stop="doSignIn" :class="{ disable: !signInAuth.able }">
			<image class="sign-in-btn-image" src="@/static/images/sign-in/sign-in-btn.png" mode="aspectFit"></image>
			<text class="sign-in-btn-text">{{ signInAuth.text }}</text>
		</view>
	</view>
</template>

<script>
import moment from '@/utils/Moment.js';
export default {
	data() {
		return {
			signList: {},
			today: moment().format('YYYY-MM-DD'),
			isLoad: false
		};
	},
	mounted() {
		if (this.isLogin()) {
			this.getData();
		}
	},
	computed: {
		signInAuth: function() {
			let able = this.signList.hasOwnProperty(this.today);
			let text = '';
			if (!able) {
				text = '禁止签到';
			} else {
				able = this.signList[this.today].status == 0;
				text = able ? '去签到' : '已签到';
			}
			return {
				able,
				text
			};
		}
	},
	methods: {
		getData() {
			this.$u.api.getUserSignDate().then(res => {
				const signList = res.data;
				for (let key in signList) {
					const time = key.split('-');
					time.splice(0, 1);
					signList[key].time = time.join('-');
				}
				this.signList = signList;
				this.isLoad = true;
				// console.log(res);
			});
		},
		doSignIn() {
			if (this.signInAuth.able) {
				this.$u.api.doSignIn().then(res => {
					this.getData();
				});
			}
		}
	}
};
</script>

<style lang="scss">
//签到 后续挪到组件内
.sign-in-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 7rpx;
	.sign-in-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120rpx;
		padding: 0 10rpx;
		width: 100%;
		.sign-in-day {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			height: 120rpx;
			.sign-in-icon {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				&.today {
					.sign-in-day-image {
						height: 82rpx;
						width: 69rpx;
					}

					.sign-in-day-remark {
						bottom: -8rpx;
					}
					.sign-in-day-tick {
						margin-top: 5rpx;
						margin-bottom: 0;
					}
				}
				.sign-in-day-image {
					width: 56rpx;
					height: 53rpx;
				}
				.sign-in-day-tick {
					width: 28rpx;
					height: 28rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				.sign-in-day-remark {
					font-size: 22rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					line-height: 30px;
					position: absolute;
					bottom: 6rpx;
					left: 1rpx;
					right: 0;
					top: 0;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.sign-in-day-text {
				height: 25rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(151, 151, 151, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 14rpx;
			}
		}
	}

	.sign-in-btn {
		position: relative;
		width: 398rpx;
		height: 92rpx;
		margin-top: 10rpx;
		&.disable {
			filter: grayscale(100%);
			filter: gray;
		}
		.sign-in-btn-image {
			width: 398rpx;
			height: 92rpx;
		}
		.sign-in-btn-text {
			height: 45rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 45rpx;
			letter-spacing: 8rpx;
			padding-left: 8rpx;
			position: absolute;
			top: 19rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
</style>
